<template>
	<view class="content" style="background-color: #81c784; border-radius: 4rpx;">
		<text style="font-size: 40rpx; font-weight: bold; 
			text-align: center; display: block; margin: 20rpx 0;">
			子组件B
		</text>
		<view class="b-box" style="padding: 0 20rpx 20rpx; display: flex; align-items: center;">
			<text style="font-size: 32rpx;">CompA组件传进来的值:</text>
			<text style="background-color: #2196f3; color: #fff; font-weight: bold; 
				padding: 5rpx 10rpx; border-radius: 4rpx; margin-left: 10rpx; font-size: 32rpx;">{{ result }}</text>
		</view>
		<view class="b-box" style="padding: 0 20rpx 20rpx; display: flex; align-items: center; gap: 10rpx;">
			<text style="font-size: 32rpx;">回传值:</text>
			<input type="text" v-model="callbackValue" style="background-color: #e6e6e6; 
			    color: #ffcc00; font-weight: bold; 
				padding: 15rpx; border: 2rpx solid red; border-radius: 4rpx; flex: 1; font-size: 32rpx;" />
			<button @click="sendOutside()" style="background-color: #f44336; color: #fff; border: none; 
				border-radius: 4rpx; padding: 15rpx 20rpx; font-size: 32rpx;">回传</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: '',
				callbackValue: ''
			};
		},
		created() {
			uni.$on('getIntent', (msg) => {
				console.error("----CompB---getIntent----->"+msg);
				this.result = msg;
			});
		},
		beforeDestroy() {
			uni.$off('getIntent');
		},
		methods: {
			sendOutside() {
				console.warn("----CompB----sendOutside-------->" + this.callbackValue);
				this.$emit('callBackFun', this.callbackValue);
			}
		}
	};
</script>

<style>
	.content {
		padding-top: 20rpx;
	}
</style>